<template>
	<view class="acticon">
		<view>
	    <swiper
	        class="home-swiper"
	    	indicator-dots="true" 
	    	autoplay="true" 
			circular="true"
	        interval="3000"
	        duration="1000"
	        indicator-color="#bfbfbf"
	        indicator-active-color="#00ACED"
	      >
	        <block v-for="(item,index) in datalist.images" wx:key="item.datalist.images">
	          <swiper-item>
	            <image @click="clickImg(index)" :src="datalist.images[index]" style="width: 100%;height: 100%;border-radius: 10px;"></image>
	          </swiper-item>
	        </block>
	      </swiper>
		  </view>
		    <!-- 头像昵称 -->
		        <view class="tacbher">
		          <image
		            class="asd"
		            round
		            v-if="datalist.simpleUserInfo.avatar != null"
		            :src="datalist.simpleUserInfo.avatar"
		            alt="" 
					@click="actione(index)"
		          />
		          <image
		            class="asd"
		            round
		            v-else
		            src="@/static/missing-face.png"
		            alt=""  
					@click="actione(index)"
		          /> 
		          <span class="vdinch">{{datalist.simpleUserInfo.nick}}</span>
		  
		          <span class="asdasd">
					  <van-button
		              class="chdexh"
		              round
		              size="small"
		              color="#ff7144"
					  v-if="actye == false"
					  @click="payto"
		              >关注</van-button
		            >
					<van-button
					  class="chdexh"
					  round
					  size="small"
					  color="#d2d3d5"
					  v-else
					  @click="unfollow"
					  >已关注</van-button
					>
					</span>
		        </view>
		  <!-- 标题内容 -->
		  <view >
		  	  <h4>{{datalist.title}}</h4>
			  <view class="palyte">
			          {{ datalist.simpleTextDesc.desc }}
			  </view>
		  </view>
		<view>
			<h5>评论</h5>
			<view v-for="(item,index) in pary" :key="pary" data-type="1">
			        <image class="imgcound" :src="item.userAvatar" alt="" @click="actionoper(index)"/>
			        <span class="acty-cate">{{item.userNick}}</span>
			        <view class="auyrea" @click="acerter(index)">{{item.text}}</view>
				   <van-goods-action-icon
				   v-if="item.thumbsUp == false"
				     class="chendft"
				     icon="good-job-o"
				     :text="item.thumbsUpNumber"
				     color="#A4A4A4"
					  @click="pvote(index)"
				   />
				   <van-goods-action-icon
				     v-else
				     class="chendft"
				     icon="good-job"
				     :text="item.thumbsUpNumber"
				     color="#ff7144"
					 @click="hcadell(index)"
				   />
				   <span class="pojnf">{{item.commentTime.split(' ')[0]}}</span>
				 <!-- 子评论 -->
				 <view v-for="(t,c) in pary" :key="pary" >
				     <view v-for="(a,b) in t.subCommentResp" :key="t.subCommentResp" v-if="a.articleCommentId == item.commentId">
						 <image class="imgco" :src="a.userAvatar" alt="" @click="actiono(index,b)"/>
						 <span class="acty-cate">{{a.userNick}}</span>
						<view class="acte-after" v-if="a.beUserNick == null" @click="xdiscuster(c,b)">{{a.text}}</view>
						<view class="acte-after" v-else @click="xdiscuster(c,b)">回复<span style="color: #6b7996;margin-left: 10rpx;">{{a.beUserNick}}</span>:&nbsp;{{a.text}}</view>
						<span class="pojnf">{{a.commentTime.split(' ')[0]}}</span>	
					   <van-goods-action-icon
					    v-if="a.thumbsUp == false"
					     class="chendft"
					     icon="good-job-o"
					     :text="a.thumbsUpNumber"
					     color="#A4A4A4"
						 @click="xpovet(c,b)"
					   />
					   <van-goods-action-icon
					     v-else
					     class="chendft"
					     icon="good-job"
					     :text="a.thumbsUpNumber"
					     color="#ff7144"
						 @click="callxpty(c,b)"
					   />
				    </view>
				   </view>
				   <!-- 查看更多 -->
	               <view class="acdipe" v-if="item.subCommentResp[2]">
                      <span class="" @click="evenmore(index)">查看更多&nbsp;></span>				
					</view>
				   </view>
				
				   <!-- 查看全部评论 -->
				   <view class="caty-acvin">
				   	 <h6 @click="toggleMask()">查看全部评论
				   	 <van-icon name="arrow" size="15" />
				   	 </h6>
				   </view>

		</view>
		  <!-- 底部评论点赞 -->
		  <view class="acvcell">
			  <view class="acvbune">
		  	  <van-field
			  class="acgroup"
			   :left-icon="userInfo"
		  	    placeholder="我来说两句"
				type="text"
				disabled
				adjust-position
		  	    @click-input="onChange"
		  	  />
			</view>
			<van-goods-action-icon class="qweafgs" icon="chat-o" size="18" :text="datalist.commentNumber" @click="toggleMask()"/>
			<van-goods-action-icon class="qweafgs" v-if="judg == false" icon="star-o" size="18" :text="datalist.favorites" @click="aaaa()"/>
			<van-goods-action-icon class="qweafgs" v-else icon="star" color="#ff7144" size="18" :text="datalist.favorites" @click="aaaa()"/>
			<van-goods-action-icon class="qweafgs" v-if="Linkche == false" icon="good-job-o" size="18" :text="datalist.thumbsUp" @click="give()"/>
			<van-goods-action-icon class="qweafgs" v-else icon="good-job" color="#ff7144" size="18" :text="datalist.thumbsUp" @click="give()"/>
			<van-goods-action-icon class="qweafgs" icon="share-o" size="18" :text="datalist.shareNumber"/>
		  </view>
		    <!-- 弹出框 -->
		    <van-popup
			class="acty-acenpopu"
		      :show="show" 
			  close-on-click-overlay
			  :safe-area-inset-top="true"
			  lock-scroll
		      position="bottom"
			   custom-style="height: 55%" 
		      @close="onClose">
			  <view class="catea">
		    	全部评论
				<van-icon class="caty-icped" size="35upx" name="cross" @click="onClose"/>
		    </view>
			<view v-for="(item,index) in pary" :key="pary" data-type="1">
			        <image class="imgcound" :src="item.userAvatar" alt="" @click="actionoper(index)"/>
			        <span class="acty-cate">{{item.userNick}}</span>
			        <view class="auyrea" @click="acerter(index)">{{item.text}}</view>
			      <van-goods-action-icon
			      v-if="item.thumbsUp == false"
			        class="chendft"
			        icon="good-job-o"
			        :text="item.thumbsUpNumber"
			        color="#A4A4A4"
			      	@click="pvote(index)"
			      />
			      <van-goods-action-icon
			        v-else
			        class="chendft"
			        icon="good-job"
			        :text="item.thumbsUpNumber"
			        color="#ff7144"
			      	@click="hcadell(index)"
			      />
				    
			     
				   <span class="pojnf">{{item.commentTime.split(' ')[0]}}</span>
				<!-- 子评论 -->
				<view v-for="(t,c) in pary" :key="pary" >
				    <view v-for="(a,b) in t.subCommentResp" :key="t.subCommentResp" v-if="a.articleCommentId == item.commentId">
						<image class="imgco" :src="a.userAvatar" alt="" @click="actiono(index,b)"/>
						<span class="acty-cate">{{a.userNick}}</span>
						<view class="acte-after" v-if="a.beUserNick == null" @click="xdiscuster(c,b)">{{a.text}}</view>
						<view class="acte-after" v-else @click="xdiscuster(c,b)">回复<span style="color: #6b7996;margin-left: 10rpx;">{{a.beUserNick}}</span>:&nbsp;{{a.text}}</view>
						<span class="pojnf">{{a.commentTime.split(' ')[0]}}</span>	
						<van-goods-action-icon
							v-if="a.thumbsUp == false"
							class="chendft"
							icon="good-job-o"
							:text="a.thumbsUpNumber"
							color="#A4A4A4"
							@click="xpovet(c,b)"
							/>
						 <van-goods-action-icon
							v-else
							class="chendft"
							icon="good-job"
							:text="a.thumbsUpNumber"
							color="#ff7144"
							@click="callxpty(c,b)"
							 />
				   </view>
				   </view>
		<!-- 查看更多 -->
		<view class="acdipe" v-if="item.subCommentResp[2]">
		   <view class="" @click="evenmore(index)">查看更多&nbsp;></view>				
							</view>
				   </view>
				   <van-field
				   class="acfieter"
				    :left-icon="userInfo"
				     placeholder="我来说两句"
				     :border="true"
				    @focus="onChange"
				   />
			</van-popup>
			<!-- 弹出输入框 -->
	        <u-popup :show="asdf" mode="bottom" @open="aaa" @close="bbb" :customStyle="het">
	                 <input
					 class="u-border"
					    type="text"
	                    placeholder="请输入内容"
						:adjust-position="false"
						confirm-type="send"
						:focus="asdfa"
						@confirm="impoinput"
	                    v-model="value"
	                  ></input>
					</u-popup>
	</view>
</template>

<script>
	import Api from '../../http/api.js'
	export default {
   data(){
	   return {
		   het:'',
		   value:'',
		   maskState: 0, 
		   actye:'',
		   judg:'',
		   Linkche:'',
		   userid:'',
		   aa:'',
		   userInfo:'',
		   show:false,
		   asdf:false,
		   asdfa:false,
		   vle:'',
		   datalist:{},
		    images:[],
			pary:[],
			list:[],
			acuinfo:[],
			     q:{
			        index:1,
			        size:5,
			        articleId:''
			      },
				  z:{
					  index:1,
					  size:10,
					  commentId:'',
					  skipNumber:0
				  },
			info:{
				articleId:'',
				text:''
			},
			uesepe:{
				cancel:"",
				articleId:''
			},
			userinfo:{
				articleCommentId:'',
				articleId:'',
				userId:'',
				text:'',
				reply:true
			},
			// 评论文章参数
			article:{
				articleCommentId:'',
				articleId:'',
				userId:'',
				text:''
			}
	   }
   },
   onLoad() {
		this.loadData();
		this.loachedfg();
		},
   
   methods:{
	   acder(event){
		  this.het = `
		  width:100%;
		margin-bottom:${event.detail.height}px;
		  `
	   },
	   // 弹框打开
	   aaa(){
		 this.asdf = true
		 this.asdfa = true
	   },
	   // 弹框收起
	   bbb(){
		 this.asdf = false
		 this.asdfa = false
		 this.value = ''
		 this.article.text = ''
		 this.info.text = ''
	   },
	   async impoinput(event){
		   console.log(event.detail.value)
		   if(event.detail.value == ''){
			   this.$api.msg('评论不能为空');
		   } else{
			   if(this.vle == 2){
			   		 this.article.text = event.detail.value
			   		 const res = await Api.useryist(this.article)
			   }
			    else if(this.vle == 1){
			   		this.info.text = event.detail.value
			   		const rea = await Api.essayist(this.info)
			   		if(rea.code == 200){
			   			this.$api.msg('评论成功');
			   			this.info.text = ''
			   				} 
			   			}
		   }
		    this.value = ''
		    this.article.text = ''
		    this.asdf = false
			this.asdfa = false
		    this.loadData()
	   },
	   // 子评论回复
	   xdiscuster(c,b){
		   this.asdf = true
		   this.vle = 2
		    this.userinfo.reply = false
		   this.article.articleId = this.pary[c].articleId
		   this.article.articleCommentId = this.pary[c].commentId
		   this.article.userId = this.pary[c].subCommentResp[b].userId
	   },
	async loadData(){
	var pages = getCurrentPages(); //获取加载的页面
	var currentPage = pages[pages.length - 1];  //获取当前页面的对象
    this.aa = currentPage.options.id //当前页面url的参数
	this.userid = currentPage.options.user //当前页面url的参数
	this.userInfo = currentPage.options.userInfo //当前页面url的参数
	
	   let result = await Api.getList({articleId:this.aa});
	    this.datalist = result.data
		this.images = result.data.images
		// 评论
		this.q.articleId = currentPage.options.id
		const refs = await Api.discuss(this.q)
		this.pary = refs.data.data
	 },
	 // 判断是否关注
	 async loachedfg(){
		 // 文章收藏判断
		const red = await Api.judgment({articleId:this.datalist.articleId})
		this.judg = red.data
		// 文章点赞判断
		const reh = await Api.Liking({articleId:this.datalist.articleId})
		this.Linkche = reh.data
		 // 评论关注判断
		 const reg = await Api.attention({userId:this.userid})
		this.actye = reg.data
	 }, 
	 // 关注
	 async payto(){
		
		 const reg = await Api.concern({userId:this.userid})
		 if(reg.code != "200"){
			 this.$api.msg("用户不存在");
		 }
		
		 this.loachedfg()
	 },
	 // 取消关注
	 async unfollow(){
		 const reg = await Api.unfollow({userId:this.userid})
		 this.loachedfg()
	 },
	 // 评论点赞
	 async pvote(index){
		 const commid = this.pary[index].commentId
		 const ref = await Api.upvote({commentId:commid})
		  this.loadData()
	 },
	 // 取消点赞
	 async hcadell(index){
		 const commid = this.pary[index].commentId
		 const red = await Api.callpvote({commentId:commid})
		  this.loadData()
	 },
	 // 用户评论点赞
	 async xpovet(c,b){
		 const commid = this.pary[c].subCommentResp[b].commentId
		 const res = await Api.cpovet({commentId:commid})
		 this.loadData()
	 },
	 // 用户评论取消点赞
	 async callxpty(c,b){
		 const commid = this.pary[c].subCommentResp[b].commentId
		 const res = await Api.callcpon({commentId:commid})
		 this.loadData()
	 },
	 // 文章评论
	 async onChange(){
		 this.asdf = true
		 this.vle = 1
		 this.info.articleId = this.aa
	 },
	// 用户评论
	  acerter(index){
		  this.article.userId = ''
		  this.article.articleId = this.pary[index].articleId
		  this.article.articleCommentId = this.pary[index].commentId
		  this.userinfo.reply = true
		  this.asdf = true
		  this.vle = 2
	  },
	 // 收藏
	 async aaaa(){
	 	this.uesepe.articleId = this.datalist.articleId
	 	this.uesepe.cancel = this.judg
	 	const ress = await Api.collect(this.uesepe)
	  	this.loachedfg()
	 },
	 // 文章点赞
	 async give(){
		 this.uesepe.articleId = this.datalist.articleId
		 this.uesepe.cancel = this.Linkche
		 const rej = await Api.giveat(this.uesepe)
		 this.loachedfg()
	 },
	 // 查看更多
	 async evenmore(index){
		 this.z.commentId = this.pary[index].commentId
		 const res = await Api.subcomment(this.z)
		 this.pary[index].subCommentResp = res.data.data
		 console.log(this.pary[index].subCommentResp)
	 },
	 // 弹出框
	  onClose() {
	    this.show = false
	   },
	   // 查看全部评论
     toggleMask(){
		 this.q.size = 100
	   this.show = true
	   this.loadData();
   },
   // 跳转用户详细资料
   actione(index){
      uni.navigateTo({
      	url: `/pages/components/information?id=`+this.datalist.simpleUserInfo.userId,
      	})
   },
   actionoper(index){
	   uni.navigateTo({
	   	url: `/pages/components/information?id=`+this.pary[index].userId,
	   	})
   },
   actiono(index,b){
		uni.navigateTo({
			url: `/pages/components/information?id=`+this.pary[index].subCommentResp[b].userId,
			})
   },
   // 点击图片放大
   clickImg(index){
   	const imurl = this.datalist.images[index]
   	  wx.previewImage({
   	    urls: this.datalist.images, //需要预览的图片http链接列表，注意是数组
   	    current: imurl, // 当前显示图片的http链接，默认是第一个
   	    success: function (res) {
   			wx.editImage({
   			  src: this.imgUrl, // 图片路径
   			})
   		},
   	    fail: function (res) { },
   	    complete: function (res) { },
   	  })
   },
   }
   }
</script>

<style lang="scss">
	
	.acticon{
		padding: 20rpx;
	}
.home-swiper{
	height: 550rpx;
}
.palyte{
  font-size: 28rpx ;
  margin-left: 12rpx;
  padding-bottom: 30rpx;
  border-bottom: 1rpx solid #f3f3f3;
}
h4{
  margin-left: 12rpx;
  margin-bottom: 15rpx;
  margin-top: 15rpx;
}
.tacbher {
  margin-top: 5px;
  border-bottom: 1px solid #f3f3f3;
    height: 47px;
}
.asd {
  width: 36px;
  height: 36px;
  margin-right: 10px;
  border-radius: 50%;
  margin-left: 6px;
}
.vdinch {
  display: inline-block;
  transform: translateY(-65%);
  width: 60%;
  font-weight: 400;
    font-size: 14px;
}
.chdexh {
  display: inline-block;
position: relative;
left: 3%;
top: -21%;
width: 17%;
height: 30px;

}
.imgcound{
	  margin-left: 6px;
	 margin-right: 10px !important;
	  width: 70rpx;
	  height: 70rpx;
	   border: 1px solid #858585;
	  border-radius: 50%;
}
.imgco{
	margin-left: 40px;
	margin-right: 10px !important;
	transform: translateY(-70%);
	 width: 45rpx;
	 height: 45rpx;
	 border: 1px solid #858585;
	 border-radius: 50%;
}
.auyrea{
     width: 60%;
    margin-left: 50px;
    margin-bottom: 20px;
    transform: translateY(-15px);
	font-size: 14px;
}
.acte-after{
	width: 60%;
	margin-left: 65px;
	 margin-bottom: 20px;
	 transform: translateY(-15px);
		font-size: 14px;
}
.chendft {
  float: right;
  position: relative;
  bottom: 130upx;
  margin-right: 20upx;
}
.acty-cate{
    display: inline-block;
    transform: translateY(-100%);
    color: #858585;
    font-size: 14px;
}
.pojnf{
    display: inline-block;
    color: #858585;
    font-size: 12px;
    margin-left: 50px;
    transform: translateY(-30px);
}
h5{
	margin-bottom: 60rpx;
}
.caty-acvin{
	text-align: center;
	font-size: 14px;
	color: #858585;
	margin-bottom: 130upx;
	transform: translateX(5%);
}
	.acty-acenpopu{
		position: fixed;
		bottom: 0;
		background-color: #fff;
		width: 100%;

	}
	.catea{
		position: fixed;
		bottom: 55%;
		float: left;
		width: 100%;
		height: 75rpx;
		line-height: 75rpx;
		padding-left: 35upx;
		background-color: #fff;
		z-index: 999;
		.caty-icped{
			
			display: inline-block;;
			float: right;
			margin-right: 35px;
			line-height: 75rpx;
		}
	}
	.acfieter{
		position: fixed;
		bottom: 0upx;
		width: 90%;
		height: 70upx;
		background-color: #fff;
		padding-bottom: 10upx;
	}
	.acvcell{	
		position: fixed;
		bottom: 0;
		background-color: #fff;
		width: 100%;
		height: 120upx;
		border-top: 1px solid #f3f3f3;
		.acgroup{
			background-color: #858585;
		}
		
	}
	.acvbune{
		width: 40%;
		display: inline-block;
		transform: translateY(10upx);
	}
	.van-field__control{
		width: 100% !important;
		border-radius: 25px !important;
		background-color: #f2f2f2 !important;
		padding-left: 50upx !important;
	}
	.van-icon__image{
		display: inline-block;
		border-radius: 50% !important;
		position: absolute;
		left: 50upx;
	
	}
	.van-cell{
		padding: 0 !important;
	}
	.qweafgs{
		display: inline-block;
	}
	.asdwqe{
		z-index: 999;
		background-color: #000;
	}
	.acdipe{
		
		text-align: center;
		transform: translateX(5%);
		color: #223152;
		font-size: 26rpx;
		font-weight: 500;
	}
	// 弹出框

	 
	// 回复评论输入框
	.u-border{
		width: 90%;
		margin-left: 5%;
		border-radius: 25px !important;
	   margin-top: 10px;
	   margin-bottom: 10px;
	   padding-left: 10px;
	   height: 30px;
	   background: #f1f1f1;
	}
</style>
